<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%
String path = request.getContextPath(); String basePath =
request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
	<head>
		<base href="<%=basePath%>">
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

		<title>订单详情</title>

		<link href="css/admin.css" rel="stylesheet" type="text/css">
		<link href="css/amazeui.css" rel="stylesheet" type="text/css">

		<link href="css/personals.css" rel="stylesheet" type="text/css">
		<link href="css/orstyle.css" rel="stylesheet" type="text/css">

		<script src="js/jquery.min.js"></script>
		<script src="js/amazeui.js"></script>
		<script src="admin/assets/layer/layer.js" type="text/javascript"></script>

	</head>

	<body>
		<!--头 -->
			<jsp:include page="common/header.jsp"/>
            
		<div class="center">
			<div class="col-main">
				<jsp:include page="common/user_left.jsp"></jsp:include>
				<div class="main-wrap">
					<div class="user-orderinfo">

						<!--标题 -->
						<div class="am-cf am-padding">
							<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">订单详情</strong> / <small>Order&nbsp;details</small></div>
						</div>
						<hr/>
						<!--进度条-->
						<div class="m-progress">
							<div class="m-progress-list">
								<span class="step-1 step">
                                   <em class="u-progress-stage-bg"></em>
                                   <i class="u-stage-icon-inner">1<em class="bg"></em></i>
                                   <p class="stage-name">拍下商品</p>
                                </span>
								<span class="step-2 step">
                                   <em class="u-progress-stage-bg"></em>
                                   <i class="u-stage-icon-inner">2<c:if test="${order.ispay==1}"><em class="bg"></em></c:if></i>
                                   <p class="stage-name">卖家发货</p>
                                </span>
								<span class="step-3 step">
                                   <em class="u-progress-stage-bg"></em>
                                   <i class="u-stage-icon-inner">3<em class="bg"></em></i>
                                   <p class="stage-name">确认收货</p>
                                </span>
								<span class="step-4 step">
                                   <em class="u-progress-stage-bg"></em>
                                   <i class="u-stage-icon-inner">4<em class="bg"></em></i>
                                   <p class="stage-name">交易完成</p>
                                </span>
								<span class="u-progress-placeholder"></span>
							</div>
							<div class="u-progress-bar total-steps-2">
								<div class="u-progress-bar-inner"></div>
							</div>
						</div>
						<div class="order-infoaside">
							<div class="order-logistics">
								<a href="javascript:void();">
									<div class="icon-log">
										<i style="margin-right:10px;"><img style="width:30px;height:30px;" src="images/receive.png"></i>
									</div>
									 <div class="latest-logistics">
									 	<c:forEach items="${logis.Traces}" var="logi" varStatus="index" end="2">
										<p class="text">${logi.AcceptStation}</p>
										<div class="time-list">
											<span class="date">${logi.AcceptTime }</span>
										</div>
										</c:forEach>
										<div class="inquire">
											<span class="package-detail">快递单号: </span>
											<span class="package-number">${order.orderno}</span>
										</div>
									</div>
									
									<span class="am-icon-angle-right icon"></span>
								</a>
								<div class="clear"></div>
							</div>
							<div class="order-addresslist">
								<div class="order-address">
									<div class="icon-add">
									</div>
									<p class="new-tit new-p-re">
										<span class="new-txt">${order.consname}</span>
										<span class="new-txt-rd2">${order.consphone }</span>
									</p>
									<div class="new-mu_l2a new-p-re">
										<p class="new-mu_l2cw">
											<span class="title">收货地址：</span>
											<span class="province">${order.consaddress }</span>
										</p>
									</div>
								</div>
							</div>
						</div>
						
						<div class="order-infomain">

							<div class="order-top">
								<div class="th th-item">
									<td class="td-inner">商品</td>
								</div>
								<div class="th th-price">
									<td class="td-inner">单价</td>
								</div>
								<div class="th th-number">
									<td class="td-inner">数量</td>
								</div>
								<div class="th th-operation">
									<td class="td-inner">商品操作</td>
								</div>
								<div class="th th-amount">
									<td class="td-inner">合计</td>
								</div>
								<div class="th th-status">
									<td class="td-inner">交易状态</td>
								</div>
								<div class="th th-change">
									<td class="td-inner">交易操作</td>
								</div>
							</div>

							<div class="order-main">

								<div class="order-status3">
									<div class="order-title">
										<div class="dd-num">订单编号：<a href="javascript:;">${order.orderno }</a></div>
										<span>成交时间：<fmt:formatDate value="${order.paytime}" pattern="yyyy-MM-dd HH:mm:ss"/></span>
										<!--    <em>店铺：小桔灯</em>-->
									</div>
									<div class="order-content">
										<div class="order-left">
											<c:forEach items="${order.ogs }" var="og">
											<ul class="item-list">
												<li class="td td-item">
													<div class="item-pic">
														<a href="#" class="J_MakePoint">
															<img style="width:80px;height:80px;" src="${og.goodsthums}" class="itempic J_ItemImg">
														</a>
													</div>
													<div class="item-info">
														<div class="item-basic-info">
															<a href="#">
																<p><a href="/goods/showGoodInfo?goodsId=${og.goodsid }">${og.goodsnames}</a></p>
															</a>
														</div>
													</div>
												</li>
												<li class="td td-price">
													<div class="item-price">
														${og.goodsprice }
													</div>
												</li>
												<li class="td td-number">
													<div class="item-number">
														<span>×</span>${og.goodnums }
													</div>
												</li>
												<li class="td td-operation">
													<div class="item-operation">
														退款/退货
													</div>
												</li>
											</ul>
											</c:forEach>
										</div>
										<div class="order-right">
											<li class="td td-amount">
												<div class="item-amount">
													合计：${order.goodcount }
													<p>实际付款：<span>${order.realprice }</span></p>
												</div>
											</li>
											<div class="move-right">
												<li class="td td-status">
													<div class="item-status">
														<c:if test="${order.orderstatus!=-1}">
														<c:if test="${order.isrefund==0 }">
														<c:if test="${order.ispay==0 }">
														<p class="order-info">未付款</p>
														</c:if>
														<c:if test="${order.ispay==1 and order.issend==1 }">
														<p class="order-info">卖家已发货</p>
														<p class="order-info"><a href="logistics.jsp">查看物流</a></p>
														<p class="order-info"><a href="#">延长收货</a></p>
														</c:if>
														<c:if test="${order.ispay==1 and order.issend==0 }">
														<p class="order-info">未发货</p>
														</c:if>
														</c:if>
														<c:if test="${order.isrefund==1 }">
															<p class="order-info">该订单已申请退款</p>
														</c:if>
														</c:if>
														<c:if test="${order.orderstatus==-1 }">
															<p class="order-info">该订单已删除</p>
														</c:if>
													</div>
												</li>
												<style>
													.anniu{margin:10px 0px;}
												</style>
												<li class="td td-change" style="padding:10px;">
													<c:if test="${order.orderstatus!=-1}">
													<c:if test="${order.isrefund==0 }">
													<c:if test="${order.ispay==0 }">
													<div onclick="javascript:location.href='${pageContext.request.contextPath }/OrderServlet?oper=findOrderInfoById&id=${orderInfo.id }'" class="am-btn am-btn-danger anniu">立即付款</div>
													</c:if>
													<c:if test="${order.issend==1&&order.ispay==1&&order.istakeover!=1}">
													<div onclick="updistake(${order.orderid});" class="am-btn am-btn-danger anniu">确认收货</div>
													</c:if>
													<c:if test="${order.istakeover==1}">
													<div class="am-btn am-btn-danger anniu">已收货</div>
													</c:if>
													</c:if>
													</c:if>
												</li>
											</div>
										</div>
										
									</div>
									<c:if test="${order.isrefund==0 && order.orderstatus!=-1}">
									<div onclick="javascript:location.href='/orders/getOrderByInfo/${order.orderid}?type=1';" style="margin:15px;float:right;" class="am-btn am-btn-danger anniu">申请退款</div>
									</c:if>
								</div>
							</div>
						</div>
					</div>

				</div>

			</div>
			
		</div>
		<script type="text/javascript">
			function updistake(orderid){
				$.ajax({
					url:"/orders/takeover/"+orderid,
					type:"post",
					data:"",
					dataType:"json",
					success:function(data){
						if(data){
							layer.msg('恭喜您！已确认收货，欢迎下次购买',{icon:1,time:1500});
							setTimeout(function(){//两秒后跳转  
		                       location.href='/orders/getOrderByInfo/'+orderid;
		                    },1500);
						}else{
							layer.msg('数据异常,请稍后重试！',{icon:2,time:1500});
						}
					},
					error:function(){
						alert("ajax创建失败！");
					},
				});
			}
		</script>
		<!--底部-->
		<jsp:include page="common/footer.jsp"></jsp:include>
	</body>

</html>